<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百商汇</title>
	<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0,minimum-scale = 1.0,user-scalable = no,width = device-width">
	<meta name="format-detection" content="telephone=no" />
	<link rel="stylesheet" type="text/css" href="../csses/bill.css">
	<script type="text/javascript">
		if(location.pathname != '/h5/views/login.html' && !sessionStorage.token){
			window.location.href = 'login.html';
		}
	</script>
</head>
<body>
	<div class="bill_title">
		账单
		<img src="../image/back.png" onclick="goBack()">
	</div>
	<div class="bill_box">
		<div class="tabBox">
			<ul class="tab">
				<li style="background-color: #dc4b19;" class="tabTitle">现金账单</li>
				<li class="tabTitle">商币账单</li>
			</ul>
		</div>
		<div class="tabContent money" style="display: block;">
			<ul style="z-index: 999;" class="nav">
				<li>日期</li>
				<li>人民币/账单数目</li>
			</ul>
			<div id="moneyWrapper">
				<ul class="contentDetail">
				</ul>
			</div>
		</div>
		<div class="tabContent cloud_money">
			<ul class="nav">
				<li>日期</li>
				<li>商币/账单数目</li>
			</ul>
			<div id="cloudWrapper">
				<ul class="contentDetail">
				</ul>
			</div>
		</div>
	</div>

	<div id="remindBox"></div>

	<script type="text/javascript" src="../lib/flexible.js"></script>
	<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
	<script type="text/javascript" src="../lib/iscroll.js"></script>
	<script type="text/javascript" src="../javascript/pullToRefresh.js"></script>
	<script type="text/javascript">
		onload = function(){
			getMoneyBill(1);
			getCloudBill(1);
		}

		function remind(message){
			$('#remindBox').css('display','block').text(message);
			setTimeout(function(){
				$('#remindBox').css('display','none');
			},1500)
		}

		function Tab(classname1,classname2){
			this.aLi = document.getElementsByClassName(classname1);
			this.aDiv = document.getElementsByClassName(classname2);
		}

		Tab.prototype.init = function(){
			that = this;
			for(var i = 0; i < this.aLi.length; i++){
				this.aLi[i].index = i;
				this.aLi[i].onclick = function(){
					that.change(this);
				}
			}
		};

		Tab.prototype.change = function(obj){
			for(var i = 0; i < this.aLi.length; i++){
				this.aLi[i].style.backgroundColor = '#999';
				this.aDiv[i].style.display = 'none';
			}
			obj.style.backgroundColor = '#dc4b19';
			this.aDiv[obj.index].style.display = 'block';
		};

		var tab = new Tab('tabTitle','tabContent');
		tab.init();

		function goBack(){
			window.history.back();
		}

		function getMoneyBill(page){
			$.ajax({
				type : "POST",
				url : "/api/v1/bill/list/money",
				data : {
					paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','page':'" + page + "'}"
				},
				dataType : "json",
				timeout : 10000,
				success : function (data) {
					if(data.code == 200){
						var obj = JSON.parse(data.data);
						var rmbList = obj.bills_list;
						if(rmbList.length !=0){
							var $ul = $('.money .contentDetail');
							for(var i = 0; i < rmbList.length; i++){
								var $li = $('<li></li>').appendTo($ul);
								var $div1 = $('<div></div>').addClass('detail').appendTo($li);
								var $div2 = $('<div></div>').addClass('num').text(rmbList[i].money).appendTo($li);
								$('<p></p>').addClass('time').text(rmbList[i].create_time).appendTo($div1);
								$('<p></p>').addClass('word').text(rmbList[i].title).appendTo($div1);
							}
						}else{
							remind('无更多账单');
						}
					}
				},
				error : function (xhr,type,errorThrown){
					// alert('未知错误');
				}
			});
		}

		function getCloudBill(page){
			$.ajax({
				type : "POST",
				url : "/api/v1/bill/list/cloud",
				data : {
					paramStr: "{'userName':'" + sessionStorage.userName + "','token':'" + sessionStorage.token + "','page':'" + page + "'}"
				},
				dataType : "json",
				timeout : 10000,
				success : function (data) {
					if(data.code == 200){
						var obj = JSON.parse(data.data);
						var sbList = obj.bills_list;
						if(sbList.length != 0){
							var $ul = $('.cloud_money .contentDetail');
							for(var i = 0; i < sbList.length; i++){
								var $li = $('<li></li>').appendTo($ul);
								var $div1 = $('<div></div>').addClass('detail').appendTo($li);
								var $div2 = $('<div></div>').addClass('num').text(sbList[i].cloud_money).appendTo($li);
								$('<p></p>').addClass('time').text(sbList[i].create_time).appendTo($div1);
								$('<p></p>').addClass('word').text(sbList[i].title).appendTo($div1);
							}
						}else{
							remind('无更多账单');
						}
					}
				},
				error : function (xhr,type,errorThrown){
					// alert('未知错误');
				}
			});
		}

		var abc = 1,def = 1;
		
		refresher.init({
			id:"moneyWrapper",
			pullUpAction:Load1
		});																																							
		function Load1(){
			abc++;
			getMoneyBill(abc);
			moneyWrapper.refresh();
		}

		refresher.init({
			id:"cloudWrapper",                                          
			pullUpAction:Load2
		});

		function Load2(){
			def++;
			getCloudBill(def);
			cloudWrapper.refresh();
		}
	</script>
</body>
</html>